$dividerLineHeight: 1.3rem;
$diverTop: .45rem;
$tabHeight: 2.2rem;
$tabFontSize: .8rem;
$mainColor: #3385FF; // #f54335

.frc_tabComponent {
  width: 100%;

  // 清除浮动
  .clearfix {
    *zoom: 1
  }
  .clearfix:after {
    display: block;
    height: 0;
    content: ".";
    visibility: hidden;
    clear: both
  }

  button {
    background-color: #ffffff;
    border: none;
  }

  .frc_tab-nav {
    //background-color: #fff;
    line-height: $tabHeight;
    height: $tabHeight;
    display: flex;
    display: -webkit-flex;

    .frc_tab-item {
      box-sizing: border-box;
      text-align: center;
      height: $tabHeight;
      line-height: $tabHeight;
      font-size: $tabFontSize;
      flex: 1;

      // vertical-aligned the icon and the title of each tab-item
      display: flex;
      flex-direction: column;
      align-items: center;

      i {
        position: relative;
        height: $tabHeight/2;
        zoom: .6;
        min-width: 32px;
        background-repeat: no-repeat;
        background-position: center;
      }

      span.icon_text {
        flex: 1;
        display: inline-block;
        line-height: $tabHeight/2;
        font-size: .6rem;
      }

      .tab-icon {
        width: 1.1rem;
        height: 1.1rem;
        background-repeat: no-repeat;
        display: block;
        background-size: 100%;
      }

    }

    @mixin borderStyle() {
      position: absolute;
      content: '';
      bottom: 0px;
      width: 100%;
      border-bottom: 2px solid $mainColor;
    }

    .frc_tab-item.current {
      color: $mainColor;
      position: relative;

      &:before {
        @include borderStyle;
      }
    }

    .frc_tab-item.disabled {
      color: grey;
    }
  }

  .frc_tabPane {
    position: relative;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    //top: 1rem;
    //padding-left: 1rem;
    //height: 100px;
    //overflow-y: scroll;
    //overflow-x: hidden;
  }

}